<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>样式演示</title>
  <style>
    body {

      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653636324&t=9d8acdf4a812016ce1b4aa85d9c90bdc);
      background-size: cover;

    }

    #app {
      margin: 100px auto;
      width: 600px;
      height: 370px;
      background: rgba(0, 0, 0, .5);
      padding: 100px;
      position: relative;
      z-index: 1;
    }

    #app::after {

      position: absolute;

      left: 0;
      top: 0;

      bottom: 0;
      right: 0;

      content: '';

      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653636324&t=9d8acdf4a812016ce1b4aa85d9c90bdc);

      background-size: cover;

      z-index: -1;

      filter: blur(37px);

    }

    p {

      font-size: 28px;

      color: #FFFFFF;

      margin-bottom: 30px;

    }
  </style>
</head>

<body>
  <div id="app">

    <p>时间带走了回不去的青春，</p>

    <p>却带不走我一往无前的心！</p>

    <p>世间万物，万般困难、</p>

    <p>能耐我何？</p>

  </div>
  <!-- <script src="./index2.js"></script> -->
</body>

</html>